<template>
    <div>
        <div demo-bg>
            <dv-border-box8 :dur="5" style="height:20.3em;">
                <div dv-bg>
                    <div class="lis">
                        <li>·</li>
                        <p>销量排行榜</p>
                    </div>
                    <div class="box2" ref="divs"></div>
                </div>
            </dv-border-box8>
        </div>

    </div>
</template>

<script setup lang="ts">
import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3'
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts';
let divs = ref()
let datas = [
    {
        name: "已入驻",
        value: 8,
    },
    {
        name: "已出售",
        value: 5,
    },
    {
        name: "已租凭",
        value: 6,
    },
    {
        name: "闲置房产",
        value: 4,
    },
  
];

let option = {
    color: ["#F56463", "#00C6FF", "#F09615", "#0079E6"],
    title: { // 圆环标题
        text: '总产量', // 主标题
        textStyle: { // 主标题样式
            color: '#fff',
            fontWeight: 'bold',
            fontSize: 20
        },
        left: '34%', // 定位到适合的位置
        top: '46%', // 定位到适合的位置
        subtext: `26元`, // 副标题
        subtextStyle: { // 副标题样式
            color: '#fff',
            fontSize: 18,
            fontWeight: 'bold'
        },
        textAlign: 'center' // 主、副标题水平居中显示
    },
    legend: {
        itemHeight: 10,
        itemWidth: 14,
        icon: "rect",
        orient: "vertical",
        top: "center",
        right: "5%",
        textStyle: {
            align: "left",
            color: "#",
            verticalAlign: "middle",
            rich: {
                name: {
                    width: 60,
                    fontSize: 16,
                },
                value: {
                    width: 10,
                    align: "right",
                    fontFamily: "Medium",
                    fontSize: 16,
                },
                rate: {
                    width: 10,
                    align: "right",
                    fontSize: 16,
                },
            },
        },
        data: datas,
        formatter: (name: string) => {
            if (datas.length) {
                const item = datas.filter((item) => item.name === name)[0];
                return `{name|${name}}{value| ${item.value}} {rate| 元}`;
            }
        },
    },
    tooltip: {
        trigger: "item",
        formatter: "{d}%",
    },
    series: [
        {
            name: "",
            type: "pie",
            radius: ["30%", "80%"],
            center: ["35%", "50%"],
            roseType: "radius",
            label: {
                formatter: "{d}%",
            },
            labelLine: {
                length: 1,
                length2: 20,
            },
            data: datas,
        },
    ],
};
onMounted(() => {
    let myChart = echarts.init(divs.value);
    // 绘制图表
    myChart.setOption(option);
})
</script>

<style scoped lang="scss">
.div {
    height: 500px;

    .lis {
        display: flex;
        align-items: center;
        border-bottom: rgb(32, 124, 181) solid 1px;

        li {
            text-shadow: 0 0 7px rgb(191, 255, 254);
            margin-left: 20px;
            color: #18C7F2;
            font-size: 70px;
            list-style: none;
            line-height: 50px;
            padding-right: 10px;
            padding-bottom: 10px;
        }

        p {
            font-size: 20px;
        }
    }
    .box2{
        width: 100%;
        height: 260px;
    }
}
</style>